<template>
    <div class="cart">
      <Header title="购物车" :edit="true"/>
      <CartDetail v-if="itShow" :changeShow="changeShow" />
      <Empty v-else/>
      <Footer />
    </div>
</template>

<script>
import Footer from'../../components/Footer.vue'
import Empty from '../../components/Empty.vue'
import Header from '../../components/Header.vue'
import CartDetail from './components/CartDetail.vue'
import { useStore } from 'vuex'
import { onMounted,ref} from 'vue'
export default {
    components:{
     Footer,
     Empty,
     Header,
     CartDetail,
    },
    setup(){
        const itShow = ref(true)
        const store = useStore()

        const init =()=>{
            if(store.state.cartList.length === 0){
                itShow.value = false
            }
        }
        const changeShow =()=>{
            itShow.value = false
        }
        onMounted(()=>{
            init()
        })
        return{
            itShow,
            changeShow,
        }
    }
}
</script>

<style lang="less" scoped>
.cart{
   display: flex;
   flex-flow: column;
   height: 100%;
   .content{
    flex: 1;
    overflow-y: auto;
   }
}
</style>